<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { useRouter } from 'vue-router'
import axios from 'axios'
import Cookies from 'js-cookie'
import { 
  User, 
  Box, 
  Document, 
  Key, 
  TrendCharts, 
  Bell, 
  Setting,
  Download,
  Upload,
  Refresh,
  Plus
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import * as echarts from 'echarts'

// 获取路由实例
const router = useRouter()

document.title = 'MMD模型资源管理中心 - 仪表板'

// 当前用户信息
const currentUser = ref('')

// 统计数据
const statistics = ref({
  totalUsers: 0,
  totalModels: 0,
  totalDownloads: 0,
  activeSessions: 0
})

// 加载状态
const loading = ref(true)

// 最近活动
const recentActivities = ref([])

// 快速操作
const quickActions = ref([
  {
    icon: 'Plus',
    title: '发布模型',
    description: '添加新的MMD模型',
    route: '/model',
    color: 'primary'
  },
  {
    icon: 'User',
    title: '用户管理',
    description: '管理系统用户',
    route: '/user',
    color: 'success'
  },
  {
    icon: 'Key',
    title: '授权管理',
    description: '管理访问权限',
    route: '/code',
    color: 'warning'
  }
])

// 调试：打印快速操作配置
console.log('快速操作配置:', quickActions.value)

// 系统状态
const systemStatus = ref({ cpu: 0, memory: 0, disk: 0, network: 0 })
let sysChart = null
const sysChartRef = ref(null)

// 图表数据
const chartData = ref({
  downloads: [120, 200, 150, 80, 70, 110, 130],
  users: [20, 35, 25, 15, 30, 40, 35],
  models: [5, 8, 12, 6, 9, 15, 11]
})

const getStatusColor = (status) => {
  const colors = {
    success: '#28a745',
    warning: '#ffc107',
    error: '#dc3545',
    info: '#17a2b8'
  }
  return colors[status] || colors.info
}

const getActivityIcon = (type) => {
  const icons = {
    model: 'Box',
    user: 'User',
    download: 'Download',
    system: 'Setting'
  }
  return icons[type] || 'Document'
}

// 获取统计数据
const fetchStatistics = async () => {
  try {
    loading.value = true
    
    // 获取模型总数（v2）
    const modelRes = await axios.get('/api/v2/model/list', {
      params: { page: 1, size: 1 }
    })
    const modelPage = modelRes?.data?.data
    statistics.value.totalModels = modelPage?.total || 0
    
    // 获取用户统计（v2）
    try {
      const userRes = await axios.get('/api/v2/user/stats')
      const stats = userRes?.data?.data
      if (stats) {
        statistics.value.totalUsers = stats.total ?? 0
      }
    } catch (error) {
      statistics.value.totalUsers = 1250
    }
    
    // 获取下载统计（v2）
    try {
      const downloadRes = await axios.get('/api/v2/metrics/downloads')
      const d = downloadRes?.data?.data
      if (d) {
        statistics.value.totalDownloads = d.totalDownloads ?? 0
      }
    } catch (error) {
      statistics.value.totalDownloads = 15420
    }

    // 获取活跃会话（v2）
    try {
      const sessionRes = await axios.get('/api/v2/metrics/sessions')
      const s = sessionRes?.data?.data
      if (s) {
        statistics.value.activeSessions = s.activeSessions ?? 0
      }
    } catch (error) {
      statistics.value.activeSessions = 45
    }

    // 获取系统状态（v2）
    try {
      const sysRes = await axios.get('/api/v2/metrics/system')
      const sys = sysRes?.data?.data
      if (sys) {
        systemStatus.value = {
          cpu: Number(sys.cpu) || 0,
          memory: Number(sys.memory) || 0,
          disk: Number(sys.disk) || 0,
          network: Number(sys.network) || 0
        }
        updateSystemChart()
      }
    } catch (error) { /* 保持默认 */ }

    // 获取最近活动（v2）
    try {
      const actRes = await axios.get('/api/v2/metrics/activities')
      const acts = actRes?.data?.data
      const downloads = Array.isArray(acts?.downloads) ? acts.downloads : []
      recentActivities.value = downloads.map((d)=>({
        id: d.id,
        type: 'download',
        action: '模型下载',
        title: d.model_name || '未知模型',
        user: d.user_name || '匿名',
        time: new Date(d.created_at).toLocaleString(),
        status: 'info'
      }))
    } catch (error) { /* 使用空列表 */ }
    
  } catch (error) {
    console.error('获取统计数据失败:', error)
    // 使用模拟数据作为后备
    statistics.value = {
      totalUsers: 1250,
      totalModels: 156,
      totalDownloads: 15420,
      activeSessions: 45
    }
  } finally {
    loading.value = false
  }
}

// 刷新统计数据
const refreshStatistics = () => {
  fetchStatistics()
}

const navigateTo = (route) => {
  console.log('导航到:', route)
  
  // 添加点击反馈
  const button = event?.target?.closest('.quick-action-card')
  if (button) {
    button.style.transform = 'scale(0.95)'
    setTimeout(() => {
      button.style.transform = ''
    }, 150)
  }
  
  // 显示成功提示
  const actionName = quickActions.value.find(action => action.route === route)?.title || '操作'
  ElMessage.success(`正在跳转到${actionName}...`)
  
  // 使用 router.push 进行实际导航
  router.push(route)
}

// 监听模型数据变化
const checkForUpdates = () => {
  const lastUpdate = localStorage.getItem('dashboardRefresh')
  if (lastUpdate && parseInt(lastUpdate) > (window.lastDashboardUpdate || 0)) {
    window.lastDashboardUpdate = parseInt(lastUpdate)
    fetchStatistics()
  }
}

// echart 构建
const buildSystemChart = () => {
  if (!sysChartRef.value) return
  if (!sysChart) {
    sysChart = echarts.init(sysChartRef.value)
    window.addEventListener('resize', () => sysChart && sysChart.resize())
  }
  updateSystemChart()
}

const updateSystemChart = () => {
  if (!sysChart) return
  const option = {
    tooltip: { trigger: 'item' },
    radar: {
      indicator: [
        { name: 'CPU', max: 100 },
        { name: '内存', max: 100 },
        { name: '磁盘', max: 100 },
        { name: '网络', max: 100 }
      ],
      splitArea: { areaStyle: { color: ['rgba(212,175,55,0.05)'] } },
      splitLine: { lineStyle: { color: 'rgba(212,175,55,0.3)' } },
      axisLine: { lineStyle: { color: 'rgba(212,175,55,0.3)' } }
    },
    series: [{
      type: 'radar',
      areaStyle: { color: 'rgba(212,175,55,0.25)' },
      lineStyle: { color: 'rgba(212,175,55,0.8)' },
      data: [[
        systemStatus.value.cpu,
        systemStatus.value.memory,
        systemStatus.value.disk,
        systemStatus.value.network
      ]]
    }]
  }
  sysChart.setOption(option)
}

// 组件挂载时获取数据
onMounted(() => {
  // 获取当前用户信息
  const username = Cookies.get('username') || localStorage.getItem('userName') || '管理员'
  currentUser.value = username
  
  fetchStatistics()
  window.lastDashboardUpdate = Date.now()
  
  // 定期检查更新
  setInterval(checkForUpdates, 5000) // 每5秒检查一次
  
  // 监听storage事件（跨标签页通信）
  window.addEventListener('storage', (e) => {
    if (e.key === 'dashboardRefresh') {
      fetchStatistics()
    }
  })

  // 初始化系统状态图
  buildSystemChart()
})

onBeforeUnmount(()=>{
  if (sysChart) {
    sysChart.dispose();
    sysChart = null;
  }
})
</script>

<template>
  <div class="dashboard">
    <!-- 欢迎区域 -->
    <div class="welcome-section">
      <div class="welcome-content">
        <h1 class="welcome-title">欢迎回来，{{ currentUser || '管理员' }}</h1>
        <p class="welcome-subtitle">今天是美好的一天，让我们开始管理MMD模型资源吧！</p>
      </div>
      <div class="welcome-actions">
        <el-button 
          type="primary" 
          :loading="loading" 
          @click="refreshStatistics"
          class="refresh-btn"
        >
          <el-icon><Refresh /></el-icon>
          刷新数据
        </el-button>
        <div class="welcome-time">
          <div class="current-time">{{ new Date().toLocaleTimeString() }}</div>
          <div class="current-date">{{ new Date().toLocaleDateString() }}</div>
        </div>
      </div>
    </div>

    <!-- 统计卡片 -->
    <div class="statistics-grid">
      <div class="stat-card" :class="{ 'loading': loading }">
        <div class="stat-icon users">
          <el-icon><User /></el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-number">
            <span v-if="loading">...</span>
            <span v-else>{{ statistics.totalUsers.toLocaleString() }}</span>
          </div>
          <div class="stat-label">总用户数</div>
          <div class="stat-trend positive">
            <el-icon><TrendCharts /></el-icon>
            <span>+12%</span>
          </div>
        </div>
      </div>

      <div class="stat-card" :class="{ 'loading': loading }">
        <div class="stat-icon models">
          <el-icon><Box /></el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-number">
            <span v-if="loading">...</span>
            <span v-else>{{ statistics.totalModels }}</span>
          </div>
          <div class="stat-label">MMD模型总数</div>
          <div class="stat-trend positive">
            <el-icon><TrendCharts /></el-icon>
            <span>+5%</span>
          </div>
        </div>
      </div>

      <div class="stat-card" :class="{ 'loading': loading }">
        <div class="stat-icon downloads">
          <el-icon><Download /></el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-number">
            <span v-if="loading">...</span>
            <span v-else>{{ statistics.totalDownloads.toLocaleString() }}</span>
          </div>
          <div class="stat-label">总下载量</div>
          <div class="stat-trend positive">
            <el-icon><TrendCharts /></el-icon>
            <span>+18%</span>
          </div>
        </div>
      </div>

      <div class="stat-card" :class="{ 'loading': loading }">
        <div class="stat-icon sessions">
          <el-icon><Bell /></el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ statistics.activeSessions }}</div>
          <div class="stat-label">活跃会话</div>
          <div class="stat-trend negative">
            <el-icon><TrendCharts /></el-icon>
            <span>-3%</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 左侧内容 -->
      <div class="content-left">
        <!-- 快速操作 -->
        <div class="quick-actions-section">
          <h2 class="section-title">快速操作</h2>
          <div class="quick-actions-grid">
            <div 
              v-for="action in quickActions" 
              :key="action.title"
              class="quick-action-card"
              @click="navigateTo(action.route)"
            >
              <div class="action-icon" :class="action.color">
                <el-icon><component :is="action.icon" /></el-icon>
              </div>
              <div class="action-content">
                <h3 class="action-title">{{ action.title }}</h3>
                <p class="action-description">{{ action.description }}</p>
              </div>
            </div>
          </div>
        </div>

        <!-- 系统状态 -->
        <div class="system-status-section">
          <h2 class="section-title">系统状态</h2>
          <div class="status-grid">
            <div class="status-item">
              <div class="status-header">
                <span class="status-label">CPU 使用率</span>
                <span class="status-value">{{ systemStatus.cpu }}%</span>
              </div>
              <el-progress 
                :percentage="systemStatus.cpu" 
                :color="systemStatus.cpu > 80 ? '#dc3545' : systemStatus.cpu > 60 ? '#ffc107' : '#28a745'"
                :stroke-width="8"
              />
            </div>

            <div class="status-item">
              <div class="status-header">
                <span class="status-label">内存使用率</span>
                <span class="status-value">{{ systemStatus.memory }}%</span>
              </div>
              <el-progress 
                :percentage="systemStatus.memory" 
                :color="systemStatus.memory > 80 ? '#dc3545' : systemStatus.memory > 60 ? '#ffc107' : '#28a745'"
                :stroke-width="8"
              />
            </div>

            <div class="status-item">
              <div class="status-header">
                <span class="status-label">磁盘使用率</span>
                <span class="status-value">{{ systemStatus.disk }}%</span>
              </div>
              <el-progress 
                :percentage="systemStatus.disk" 
                :color="systemStatus.disk > 80 ? '#dc3545' : systemStatus.disk > 60 ? '#ffc107' : '#28a745'"
                :stroke-width="8"
              />
            </div>

            <div class="status-item">
              <div class="status-header">
                <span class="status-label">网络使用率</span>
                <span class="status-value">{{ systemStatus.network }}%</span>
              </div>
              <el-progress 
                :percentage="systemStatus.network" 
                :color="systemStatus.network > 80 ? '#dc3545' : systemStatus.network > 60 ? '#ffc107' : '#28a745'"
                :stroke-width="8"
              />
            </div>
            <div class="status-item chart-item">
              <div ref="sysChartRef" class="echart-box"></div>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧内容 -->
      <div class="content-right">
        <!-- 最近活动 -->
        <div class="recent-activities-section">
          <h2 class="section-title">最近活动</h2>
          <div class="activities-list">
            <div 
              v-for="activity in recentActivities" 
              :key="activity.id"
              class="activity-item"
            >
              <div class="activity-icon" :style="{ backgroundColor: getStatusColor(activity.status) }">
                <el-icon><component :is="getActivityIcon(activity.type)" /></el-icon>
              </div>
              <div class="activity-content">
                <div class="activity-header">
                  <span class="activity-action">{{ activity.action }}</span>
                  <span class="activity-time">{{ activity.time }}</span>
                </div>
                <div class="activity-title">{{ activity.title }}</div>
                <div class="activity-user">by {{ activity.user }}</div>
              </div>
            </div>
          </div>
        </div>

        <!-- 系统公告 -->
        <div class="announcements-section">
          <h2 class="section-title">系统公告</h2>
          <div class="announcements-list">
            <div class="announcement-item">
              <div class="announcement-icon">
                <el-icon><Bell /></el-icon>
              </div>
              <div class="announcement-content">
                <h4 class="announcement-title">系统维护通知</h4>
                <p class="announcement-text">系统将于今晚22:00-24:00进行维护，期间可能影响部分功能使用。</p>
                <span class="announcement-time">2小时前</span>
              </div>
            </div>

            <div class="announcement-item">
              <div class="announcement-icon">
                <el-icon><Setting /></el-icon>
              </div>
              <div class="announcement-content">
                                 <h4 class="announcement-title">新功能上线</h4>
                 <p class="announcement-text">MMD模型版本管理功能已上线，支持模型版本控制和回滚操作。</p>
                <span class="announcement-time">1天前</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.dashboard {
  padding: 0;
}

/* 欢迎区域 */
.welcome-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding: 2rem;
  background: var(--gradient-card);
  border: 1px solid var(--border-gold);
  border-radius: 16px;
  box-shadow: 0 8px 24px var(--shadow-dark);
}

.welcome-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--gold-primary);
  margin: 0 0 0.5rem 0;
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.welcome-subtitle {
  color: var(--text-muted);
  margin: 0;
  font-size: 1rem;
}

.welcome-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.refresh-btn {
  background: var(--gradient-gold) !important;
  border: 1px solid var(--gold-primary) !important;
  color: var(--primary-black) !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
}

.refresh-btn:hover {
  background: var(--gold-accent) !important;
  border-color: var(--gold-accent) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px var(--shadow-gold) !important;
}

.welcome-time {
  text-align: right;
}

.current-time {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}

.current-date {
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* 统计卡片 */
.statistics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.stat-card {
  background: var(--gradient-card);
  border: 1px solid var(--border-gold);
  border-radius: 12px;
  padding: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px var(--shadow-dark);
}

.stat-card.loading {
  opacity: 0.7;
  pointer-events: none;
}

.stat-card.loading .stat-number {
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px var(--shadow-gold);
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-black);
  font-size: 1.5rem;
}

.stat-icon.users {
  background: linear-gradient(135deg, #007bff 0%, #6610f2 100%);
}

.stat-icon.models {
  background: var(--gradient-gold);
}

.stat-icon.downloads {
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
}

.stat-icon.sessions {
  background: linear-gradient(135deg, #ffc107 0%, #fd7e14 100%);
}

.stat-content {
  flex: 1;
}

.stat-number {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
  margin-bottom: 0.25rem;
}

.stat-label {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.stat-trend {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8rem;
  font-weight: 600;
}

.stat-trend.positive {
  color: #28a745;
}

.stat-trend.negative {
  color: #dc3545;
}

/* 主要内容区域 */
.main-content {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2rem;
}

/* 左侧内容 */
.content-left {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* 快速操作 */
.quick-actions-section {
  background: var(--gradient-card);
  border: 1px solid var(--border-gold);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 4px 12px var(--shadow-dark);
}

.section-title {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--gold-primary);
  margin: 0 0 1.5rem 0;
}

.quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.quick-action-card {
  background: var(--secondary-black);
  border: 1px solid var(--border-dark);
  border-radius: 8px;
  padding: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 1rem;
  position: relative;
  overflow: hidden;
}

.quick-action-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.1), transparent);
  transition: left 0.5s ease;
}

.quick-action-card:hover::before {
  left: 100%;
}

.quick-action-card:hover {
  border-color: var(--gold-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--shadow-gold);
}

.quick-action-card:active {
  transform: translateY(0) scale(0.98);
}

.action-icon {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-black);
  font-size: 1.2rem;
}

.action-icon.primary {
  background: var(--gradient-gold);
}

.action-icon.success {
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
}

.action-icon.warning {
  background: linear-gradient(135deg, #ffc107 0%, #fd7e14 100%);
}

.action-icon.info {
  background: linear-gradient(135deg, #17a2b8 0%, #6f42c1 100%);
}

.action-content {
  flex: 1;
}

.action-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.25rem 0;
}

.action-description {
  color: var(--text-muted);
  font-size: 0.8rem;
  margin: 0;
}

/* 系统状态 */
.system-status-section {
  background: var(--gradient-card);
  border: 1px solid var(--border-gold);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 4px 12px var(--shadow-dark);
}

.status-grid {
  display: grid;
  gap: 1rem;
}

.status-item {
  background: var(--secondary-black);
  border: 1px solid var(--border-dark);
  border-radius: 8px;
  padding: 1rem;
}

.chart-item {
  padding: 0;
}

.echart-box {
  width: 100%;
  height: 260px;
}

.status-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.status-label {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.status-value {
  color: var(--text-primary);
  font-weight: 600;
  font-size: 0.9rem;
}

/* 右侧内容 */
.content-right {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* 最近活动 */
.recent-activities-section {
  background: var(--gradient-card);
  border: 1px solid var(--border-gold);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 4px 12px var(--shadow-dark);
}

.activities-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.activity-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: var(--secondary-black);
  border: 1px solid var(--border-dark);
  border-radius: 8px;
  transition: all 0.3s ease;
}

.activity-item:hover {
  border-color: var(--gold-primary);
  transform: translateX(5px);
}

.activity-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1rem;
}

.activity-content {
  flex: 1;
}

.activity-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.25rem;
}

.activity-action {
  color: var(--text-primary);
  font-weight: 600;
  font-size: 0.9rem;
}

.activity-time {
  color: var(--text-muted);
  font-size: 0.8rem;
}

.activity-title {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
}

.activity-user {
  color: var(--text-muted);
  font-size: 0.8rem;
}

/* 系统公告 */
.announcements-section {
  background: var(--gradient-card);
  border: 1px solid var(--border-gold);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 4px 12px var(--shadow-dark);
}

.announcements-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.announcement-item {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  background: var(--secondary-black);
  border: 1px solid var(--border-dark);
  border-radius: 8px;
}

.announcement-icon {
  width: 40px;
  height: 40px;
  background: var(--gradient-gold);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-black);
  font-size: 1rem;
  flex-shrink: 0;
}

.announcement-content {
  flex: 1;
}

.announcement-title {
  color: var(--text-primary);
  font-size: 0.9rem;
  font-weight: 600;
  margin: 0 0 0.5rem 0;
}

.announcement-text {
  color: var(--text-muted);
  font-size: 0.8rem;
  margin: 0 0 0.5rem 0;
  line-height: 1.4;
}

.announcement-time {
  color: var(--text-muted);
  font-size: 0.75rem;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .main-content {
    grid-template-columns: 1fr;
  }
  
  .content-right {
    order: -1;
  }
}

@media (max-width: 768px) {
  .welcome-section {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }
  
  .welcome-time {
    text-align: center;
  }
  
  .statistics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .quick-actions-grid {
    grid-template-columns: 1fr;
  }
  
  .stat-card {
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .statistics-grid {
    grid-template-columns: 1fr;
  }
  
  .welcome-title {
    font-size: 1.5rem;
  }
}
</style>
